// ======================================= GENERAL =======================================
function createSelection(canvasId) {
	// loading source image

	// creating canvas and context objects
	var canvas = document.getElementById(canvasId);
	var ctx = canvas.getContext('2d');

	// create initial selection
	var theSelection = new Selection(ctx, 40, 50, 520, 300);

	$(canvas).mousemove(function(e) { // binding mouse move event
		var canvasOffset = $(canvas).offset();
		iMouseX = Math.floor(e.pageX - canvasOffset.left);
		iMouseY = Math.floor(e.pageY - canvasOffset.top);

		// in case of drag of whole selector
		if (theSelection.bDragAll) {
			theSelection.x = iMouseX - theSelection.px;
			theSelection.y = iMouseY - theSelection.py;
		}

		for ( var i = 0; i < 4; i++) {
			theSelection.bHow[i] = false;
			theSelection.iCSize[i] = theSelection.csize;
		}

		// hovering over resize cubes
		if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh
				&& iMouseY > theSelection.y - theSelection.csizeh && iMouseY < theSelection.y + theSelection.csizeh) {

			theSelection.bHow[0] = true;
			theSelection.iCSize[0] = theSelection.csizeh;
		}
		if (iMouseX > theSelection.x + theSelection.w - theSelection.csizeh
				&& iMouseX < theSelection.x + theSelection.w + theSelection.csizeh
				&& iMouseY > theSelection.y - theSelection.csizeh && iMouseY < theSelection.y + theSelection.csizeh) {

			theSelection.bHow[1] = true;
			theSelection.iCSize[1] = theSelection.csizeh;
		}
		if (iMouseX > theSelection.x + theSelection.w - theSelection.csizeh
				&& iMouseX < theSelection.x + theSelection.w + theSelection.csizeh
				&& iMouseY > theSelection.y + theSelection.h - theSelection.csizeh
				&& iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) {

			theSelection.bHow[2] = true;
			theSelection.iCSize[2] = theSelection.csizeh;
		}
		if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh
				&& iMouseY > theSelection.y + theSelection.h - theSelection.csizeh
				&& iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) {

			theSelection.bHow[3] = true;
			theSelection.iCSize[3] = theSelection.csizeh;
		}

		// in case of dragging of resize cubes
		var iFW = 0, iFH = 0, iFX = 0, iFY = 0;
		if (theSelection.bDrag[0]) {
			iFX = iMouseX - theSelection.px;
			iFY = iMouseY - theSelection.py;
			iFW = theSelection.w + theSelection.x - iFX;
			iFH = theSelection.h + theSelection.y - iFY;
		}
		if (theSelection.bDrag[1]) {
			iFX = theSelection.x;
			iFY = iMouseY - theSelection.py;
			iFW = iMouseX - theSelection.px - iFX;
			iFH = theSelection.h + theSelection.y - iFY;
		}
		if (theSelection.bDrag[2]) {
			iFX = theSelection.x;
			iFY = theSelection.y;
			iFW = iMouseX - theSelection.px - iFX;
			iFH = iMouseY - theSelection.py - iFY;
		}
		if (theSelection.bDrag[3]) {
			iFX = iMouseX - theSelection.px;
			iFY = theSelection.y;
			iFW = theSelection.w + theSelection.x - iFX;
			iFH = iMouseY - theSelection.py - iFY;
		}

		if (iFW > theSelection.csizeh * 2 && iFH > theSelection.csizeh * 2) {
			theSelection.w = iFW;
			theSelection.h = iFH;

			theSelection.x = iFX;
			theSelection.y = iFY;
		}

		theSelection.drawScene();
	});

	$(canvas).mousedown(function(e) { // binding mousedown event
		var canvasOffset = $(canvas).offset();
		iMouseX = Math.floor(e.pageX - canvasOffset.left);
		iMouseY = Math.floor(e.pageY - canvasOffset.top);

		theSelection.px = iMouseX - theSelection.x;
		theSelection.py = iMouseY - theSelection.y;

		if (theSelection.bHow[0]) {
			theSelection.px = iMouseX - theSelection.x;
			theSelection.py = iMouseY - theSelection.y;
		}
		if (theSelection.bHow[1]) {
			theSelection.px = iMouseX - theSelection.x - theSelection.w;
			theSelection.py = iMouseY - theSelection.y;
		}
		if (theSelection.bHow[2]) {
			theSelection.px = iMouseX - theSelection.x - theSelection.w;
			theSelection.py = iMouseY - theSelection.y - theSelection.h;
		}
		if (theSelection.bHow[3]) {
			theSelection.px = iMouseX - theSelection.x;
			theSelection.py = iMouseY - theSelection.y - theSelection.h;
		}

		if (iMouseX > theSelection.x + theSelection.csizeh
				&& iMouseX < theSelection.x + theSelection.w - theSelection.csizeh
				&& iMouseY > theSelection.y + theSelection.csizeh
				&& iMouseY < theSelection.y + theSelection.h - theSelection.csizeh) {

			theSelection.bDragAll = true;
		}

		for ( var i = 0; i < 4; i++) {
			if (theSelection.bHow[i]) {
				theSelection.bDrag[i] = true;
			}
		}
	});

	$(canvas).mouseup(function(e) { // binding mouseup event
		theSelection.bDragAll = false;

		for ( var i = 0; i < 4; i++) {
			theSelection.bDrag[i] = false;
		}
		theSelection.px = 0;
		theSelection.py = 0;
	});

	theSelection.drawScene();
	
	return theSelection;
}

//==================================== Selection Object ====================================

/**
 * define Selection constructor
 * @param ctx: canvas
 */
function Selection(ctx, x, y, w, h) {
	this.ctx = ctx;

	this.x = x; // initial positions
	this.y = y;
	this.w = w; // and size
	this.h = h;

	this.px = x; // extra variables to dragging calculations
	this.py = y;

	this.csize = 4; // resize cubes size
	this.csizeh = 6; // resize cubes size (on hover)

	this.bHow = [ false, false, false, false ]; // hover statuses
	this.iCSize = [ this.csize, this.csize, this.csize, this.csize ]; // resize
	// cubes
	// sizes
	this.bDrag = [ false, false, false, false ]; // drag statuses
	this.bDragAll = false; // drag whole selection
}

// define Selection draw method
Selection.prototype.draw = function() {

	this.ctx.strokeStyle = '#000';
	this.ctx.lineWidth = 1;
	this.ctx.strokeRect(this.x, this.y, this.w, this.h);

	// draw resize cubes
	this.ctx.fillStyle = '#fff';
	this.ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2);
	this.ctx
			.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2);
	this.ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2,
			this.iCSize[2] * 2);
	this.ctx
			.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2);
};

Selection.prototype.drawScene = function() { // main drawScene function
	this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); // clear canvas

	// and make it darker
	this.ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
	this.ctx.fillRect(0, 0, this.x, this.ctx.canvas.height);
	this.ctx.fillRect(this.x+this.w, 0, this.ctx.canvas.width, this.ctx.canvas.height);
	this.ctx.fillRect(this.x, 0, this.w, this.y);
	this.ctx.fillRect(this.x, this.y+this.h, this.w, this.ctx.canvas.height);

	// draw selection
	this.draw();
};